<template>
  <div id="zb_app">
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" class="zb_mian">
        <el-breadcrumb-item :to="{ path: '/index/home' }">后台首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/goods/new1' }">商品列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 面包屑 -->
      <!-- Tabs 标签页 -->
      <el-tabs v-model="tab" @tab-click="handleClick">
        <el-tab-pane
          :label="item.label"
          :name="item.type"
          :key="key"
          v-for="(item,key) in zb_tabs"
        />
      </el-tabs>
      <!-- Tabs 标签页 -->
      <!-- 按钮区域 商品搜索 -->
      <div class="zb_container">
        <div>
          <!-- 发布商品 -->
          <router-link :to="{name:'/goods_add'}" class="mr-2">
            <el-button type="success" size="mini">发布商品</el-button>
          </router-link>
          <!-- 发布商品 -->
          <el-button type="danger" size="mini" @click="zb_changeDel">批量删除</el-button>
          <el-button size="mini" @click="zb_changeStatus(1)">上架</el-button>
          <el-button size="mini" @click="zb_changeStatus(0)">下架</el-button>
        </div>
        <el-form :inline="true">
          <el-form-item>
            <el-input placeholder="要搜索的商品名称" size="mini" v-model="keyword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="info" size="mini" @click="this.getGoodsList">搜索</el-button>
          </el-form-item>
          <!-- <el-form-item>
            <el-button size="mini">高级搜索</el-button>
          </el-form-item> -->
        </el-form>
      </div>
      <!-- 按钮区域 商品搜索 -->
      <el-table
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :data="zb_goodsList"
      >
        <!-- 全选/全不选 -->
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <!-- 商品 -->
        <el-table-column prop="name" label="商品" width="300">
          <template slot-scope="scope">
            <div class="media">
              <el-image :src="scope.row.cover" style="width: 60px;height: 60px;" class="mr-3"></el-image>
              <div class="media-body">
                <p class="mt-0">{{scope.row.title}}</p>
                <p class="mb-0">分类：{{scope.row.category.name}}</p>
                <p class="mb-0">时间：{{scope.row.create_time}}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- 实际销量 -->
        <el-table-column align="center" prop="sale_count" width="70" label="实际销量"></el-table-column>
        <!-- 商品状态 -->
        <el-table-column prop="status" align="center" label="商品状态" width="60">
          <template slot-scope="scope">
            <span
              class="badge"
              :class="scope.row.status ? 'badge-success' : 'badge-danger'"
            >{{scope.row.status ? '上架' : '仓库'}}</span>
          </template>
        </el-table-column>
        <!-- 审核状态 -->
        <el-table-column prop="status" align="center" width="120" label="审核状态">
          <template slot-scope="scope">
            <div class="d-flex flex-column" v-if="!scope.row.ischeck">
              <el-button type="success" size="mini" @click="zb_censor(scope.row,1)" plain>审核通过</el-button>
              <el-button
                class="ml-0 mt-2"
                type="danger"
                size="mini"
                @click="zb_censor(scope.row,2)"
                plain
              >审核拒绝</el-button>
            </div>
            <span v-else>{{scope.row.ischeck === 1? '通过' : '拒绝'}}</span>
          </template>
        </el-table-column>
        <!-- 总库存 -->
        <el-table-column prop="stock" align="center" width="90" label="总库存"></el-table-column>
        <!-- 价格 -->
        <el-table-column prop="pprice" align="center" label=" 价格(元)" width="120">
          <template slot-scope="scope">
            <span class="text-danger">￥{{scope.row.min_price}}</span>
            <span>/</span>
            <span class="text-muted">￥{{scope.row.min_oprice}}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="navigate('/goods_edit',scope.row)">基础设置</el-button>
            <el-button type="text" size="mini" @click="deleteItem(scope.row)" style="color:red;">删除商品</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
//引入bottstrap样式
import "@/assets/bootstrap.css";
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      tab: "all", //标签页高亮
      zb_tabs: [
        { label: "全部", type: "all" },
        { label: "审核中", type: "checking" },
        { label: "出售中", type: "saling" },
        { label: "已下架", type: "off" },
        { label: "库存预警", type: "min_stock" },
        { label: "回收站", type: "delete" }
      ],
      keyword: "", //搜索关键字
      multipleSelection: [], //全选全不选
      page: 1, //当前页
      limit: 10, //条数
      totals: 0, //总条数
      zb_goodsList: [], //商品数据源
      ids: [], //批量要操作的数组数据
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    //头部tabs切换高亮
    handleClick(tab, event) {
      console.log(tab.name, event);
      console.log(this.tab);
    },
    //全选全不选 //重新定义ids 上架下架
    handleSelectionChange(val) {
      console.log(val);
      let ids = [];
      val.forEach(item => {
        ids.push(item.id);
      });
      this.ids = ids;
    },
    //获取商品列表
    getGoodsList() {
      this.$axios
        .get(
          `/admin/goods/${this.page}?limit=${this.limit}&tab=${this.tab}&title=${this.keyword}`
        )
        .then(res => {
          console.log(res);
          this.zb_goodsList = res.data.data.list;
          this.totals = res.data.data.totalCount;
        });
    },
    //监听分页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
      this.getGoodsList();
    },
    //监听当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getGoodsList();
    },
    //上下架
    zb_changeStatus(status) {
      // console.log(status);
      if (this.ids.length === 0) {
        this.$message.error("请选择数据");
        return false;
      }
      this.$axios
        .post("/admin/goods/changestatus", { ids: this.ids, status: status })
        .then(res => {
          console.log(res);
          if (res.data.msg == "ok") {
            //成功
            this.$message.success("成功");
            this.getGoodsList();
          }
        })
        //失败
        .catch(error => {
          console.log(error);
          this.$message.error("失败");
          return false;
        });
    },
    //审核状态
    zb_censor(item, ischeck) {
      this.$axios
        .post(
          "/admin/goods/" + item.id + "/check",
          {
            ischeck
          },
          { token: true }
        )
        //成功
        .then(res => {
          this.getGoodsList();
          this.$message.success("成功");
        })
        //失败
        .catch(error => {
          console.log(error);
          this.$message.error("失败");
        });
    },
    //删除商品
    deleteItem(item) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //请求接口
          this.$axios.post(`/admin/goods/${item.id}/delete`).then(res => {
            console.log(res);
            if (res.data.msg == "ok") {
              //删除成功
              this.$message.success("删除成功");
              //刷新列表
              this.getGoodsList();
            } else {
              //删除失败
              this.$message.error("删除失败");
              return false;
            }
          });
        })
        //取消删除
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //批量删除
    zb_changeDel() {
      this.$confirm("你确定要删除图片吗？删除可就不能恢复了幺", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
      .then(()=>{
         //调用接口
          this.$axios
            .post(`/admin/goods/delete_all`, { ids: this.ids })
            .then(res => {
              console.log(res);
              if (res.data.msg == "ok") {
                //删除成功
                this.$message.success("删除成功");
                //刷新列表
                this.getGoodsList();
              } else {
                this.$message.error("删除失败");
                return false;
              }
            });
      })
      .catch(()=>{
        this.$message.info("取消删除");
        return false;
      })
    },
    //操作
    navigate(name, id) {
      this.$router.push({
        name,
        params: { id }
      });
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {
    this.getGoodsList();
  },
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<style lang="scss" scoped>
.zb_mian {
  height: 30px;
  border-bottom: 1px solid #9999;
}
.zb_container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
